﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>淼森商城--商品详情页</title>
	<link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
	.goods-intro-list li {
		display: inline-block;
		width: 300px;
	}
       .Ptable {
           margin: 10px 0;
       }
       .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
               border-bottom: 1px solid #eee;
        }
       .Ptable-item h3 {
           width: 110px;
           text-align: right;
       }
       .Ptable-item h3, .package-list h3 {
           font-weight: 400;
           font-size: 12px;
           float: left;
       }
       h3 {
           display: block;
           font-size: 1.17em;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
           font-weight: bold;
       }
       .Ptable-item dl {
           margin-left: 110px;
       }
       dl {
           display: block;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
       }
       .Ptable-item dt {
           width: 160px;
           float: left;
           text-align: right;
           padding-right: 5px;
       }
       .Ptable-item dd {
           margin-left: 210px;
       }
       dd {
           display: block;
           -webkit-margin-start: 40px;
       }
       .package-list {
           padding: 12px 0;
           line-height: 220%;
           color: #999;
           font-size: 12px;
           margin-top: -1px;
       }
       .package-list h3 {
           width: 130px;
           text-align: right;
       }
       .package-list p {
           margin-left: 155px;
           padding-right: 50px;
       }
</style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由 js 动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top />
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li th:each="category : ${categories}">
						<a href="#" th:text="${category.name}"></a>
					</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="(image,index) in images" :key="index">
										<img :src="image" :bimg="image" @mousemove="preview(this)" />
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>{{sku.title}}</h4>
					</div>
					<div class="news">
						<span th:utext="${spu.subTitle}"></span>
					</div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em>{{xxacker.formatPrice(sku.price)}}</em><span> 降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">赠 品</i>
								<em class="t-gray" th:text="${spuDetail.packingList}"></em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，废旧轮胎回收  优惠套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">北京海淀区八里庄街道 <span>有货</span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="(val, key, speIndex) in specialSpec" :key="speIndex">
								<dt>
									<div class="fl title my-spec">
										<b><i>{{paramMap[key]}}</i></b>
									</div>
								</dt>
								<dd v-for="(v,paramIndex) in val" :key="paramIndex" >
									<a href="javascript:;" :class="{selected: paramIndex == indexes[key]}" @click="indexes[key] = paramIndex">
										{{v}}
										<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" v-model="num" disabled value="1" minnum="1" class="itxt" />
										<a href="javascript:void(0)" class="increment plus" @click="plus()">+</a>
										<a href="javascript:void(0)" class="increment mins" @click="mins()">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="#" @click.prevent="addCart()" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<br/>温馨提示：支持7天无理由退货(安装后不支持)
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="tab-main intro">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#one" data-toggle="tab">
								<span>商品介绍</span>
							</a>
						</li>
						<li>
							<a href="#two" data-toggle="tab">
								<span>包装清单</span>
							</a>
						</li>
						<li>
							<a href="#three" data-toggle="tab">
								<span>售后保障</span>
							</a>
						</li>
						<!--<li>
							<a href="#four" data-toggle="tab">
								<span>商品评价</span>
							</a>
						</li>-->
						<li>
							<a href="#five" data-toggle="tab">
								<span>汽修社区</span>
							</a>
						</li>
					</ul>
					<div class="clearfix"></div>
					<div class="tab-content tab-wraped">
						<div id="one" class="tab-pane active">
							<ul  v-for="group in groups" :key="group.id" class="goods-intro-list unstyled" style="list-style: none;">
								<h3>{{group.name}}</h3>
								<li v-for="param in group.params" :key="param.id">
									<dt>{{param.name}}：{{param.v}}</dt>
								</li>
							</ul>
							<!--商品详情-->
							<div class="intro-detail">
								<br/>
								<div th:utext="${spuDetail.description}"></div>
							</div>
						</div>
						<div id="two" class="tab-pane">
							<div class="tab-pane active">
								<ul style="list-style: none;">
									<h3>包装清单</h3>
									<li th:text="${spuDetail.packingList}"></li>
								</ul>
							</div>
						</div>
						<div id="three" class="tab-pane">
							<h3>售后保障</h3>
							<p th:text="${spuDetail.afterService}"></p>
						</div>
						<!--<div id="four" class="tab-pane">
							<h3>商品评价</h3>
						</div>-->
						<div id="five" class="tab-pane">
							<img src="https://s3.ax1x.com/2021/01/07/sehCZR.jpg" width="100px">
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>
<script th:inline="javascript">
    const skus = /*[[${skus}]]*/ [];
    const paramMap = /*[[${paramMap}]]*/ [];
    const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ "");
    const genericSpec = JSON.parse(/*[[${spuDetail.genericSpec}]]*/ "");
    const groups = /*[[${groups}]]*/ [];
    // 该数据模型，用来保存规格参数的选中项，从而确定唯一的 Sku
    const indexes = {};
    Object.keys(specialSpec).forEach(k => {
        indexes[k] = 0;
	})
</script>
<script>
    var itemVm = new Vue({
        el:"#itemApp",
        data:{
            xxacker,
            skus,
			paramMap,
			specialSpec,
            genericSpec,
			indexes,
			num: 1
        },
        components:{
            lyTop: () => import('/js/pages/top.js')
        },
		computed: {
            sku: function(){
                // 拼接 indexes 字段值
                const index = Object.values(this.indexes).join("_");
                // 通过 indexes 找到对应的 sku
                return this.skus.find(sku => sku.indexes == index);
			},
			images: function(){
                return this.sku.images ? this.sku.images.split(",") : [];
			},
			groups(){
                groups.forEach(group=>{
                    group.params.forEach(param=>{
                        if (param.generic) {
                            param.v = this.genericSpec[param.id];    // 通用规格参数
						}else{
                            param.v = JSON.parse(this.sku.ownSpec)[param.id];  // 特殊规格参数
						}
					});
				});
                return groups;
			}
		},
		methods: {
			addCart(){
				// verifyUser() 登录验证调用的是 common.js 中的 vertify 方法
				xxacker.verifyUser().then( res => {
					// 已登录发送信息到后台，保存到redis中
					xxacker.http.post("/cart", {skuId: this.sku.id, num: this.num}
							).then( res => {
								window.location.href = "http://www.xaexcellent.com/cart.html";
					})
				}).catch(()=>{
					// 未登录保存在浏览器本地的 localStorage 中
					// 1、查询本地购物车
					let carts = xxacker.store.get("EX_CART") || [];
					let cart = carts.find(cart=>cart.skuId === this.sku.id);
					// 2、判断是否存在
					if (cart) {
						// 3、存在更新数量
						cart.num += this.num;
					} else {
						// 4、不存在，新增
						cart = {
							skuId: this.sku.id,
							title: this.sku.title,
							price: this.sku.price,
							image: this.sku.images[0],
							num: this.num,
							ownSpec: this.sku.ownSpec
						}
						carts.push(cart);
					}
					// 把carts写回localstorage
					xxacker.store.set("EX_CART", carts);
					// 跳转
					window.location.href = "http://www.xaexcellent.com/cart.html";
				});
			},
            plus(){
                this.num++;
			},
			mins(){
                if (this.num > 1) {
                    this.num--;
				}
			}
		}
    });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>
<script th:inline="javascript">
    const a = /*[[${groups}]]*/ [];
    const b = /*[[${paramMap}]]*/ [];
    const c = /*[[${categories}]]*/ [];
    const d = /*[[${spu}]]*/ {};
    const e = /*[[${spuDetail}]]*/ {};
    const f = /*[[${skus}]]*/ [];
    const g = /*[[${brand}]]*/ {};
</script>
</body>

</html>